import React from "./react";
import ReactDOM from "./react-dom";

let ThemeContext = React.createContext();
let { Provider } = ThemeContext;

function Header() {
  return (
    <ThemeContext.Consumer>
      {(value) => (
        <div
          style={{
            margin: "10px",
            border: `5px solid ${value.color}`,
            padding: "5px",
          }}
        >
          头部
          <Title />
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

class Main extends React.Component {
  static contextType = ThemeContext;
  render() {
    return (
      <div
        style={{
          margin: "10px",
          border: `5px solid ${this.context.color}`,
          padding: "5px",
        }}
      >
        主体
        <Content />
      </div>
    );
  }
}

class Content extends React.Component {
  static contextType = ThemeContext;
  render() {
    return (
      <div
        style={{
          margin: "10px",
          border: `5px solid ${this.context.color}`,
          padding: "5px",
        }}
      >
        内容
        <button onClick={() => this.context.changeColor("red")}>变红</button>
        <button onClick={() => this.context.changeColor("green")}>变绿</button>
      </div>
    );
  }
}

class Title extends React.Component {
  static contextType = ThemeContext;
  render() {
    return (
      <div
        style={{
          margin: "10px",
          border: `5px solid ${this.context.color}`,
          padding: "5px",
        }}
      >
        标题
      </div>
    );
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "red" };
  }
  changeColor = (color) => {
    this.setState({ color });
  };
  render() {
    let value = { color: this.state.color, changeColor: this.changeColor };
    return (
      <Provider value={value}>
        <div
          style={{
            margin: "10px",
            border: `5px solid ${this.state.color}`,
            padding: "5px",
            width: "200px",
          }}
        >
          主页
          <Header />
          <Main />
        </div>
      </Provider>
    );
  }
}
let element = React.createElement(Page, { name: "zhufeng" });

ReactDOM.render(element, document.getElementById("root"));
